<template>
	<vs-col class="pages" :w="8">
		<div class="box-top">
			<div class="load">
				<span v-for="(item, index) in logo" :key="index">{{ item }}</span>
			</div>
			<div v-if="mouldStates">{{ $store.state.mould.name }}</div>
			<div v-if="mouldStates" class="btn-list">
				<vs-button gradient success @click="openDialog('add')">编辑模板</vs-button>
				<vs-button disabled gradient>导出模板</vs-button>
				<vs-button gradient danger @click="deleteMould">删除模板</vs-button>
			</div>
			<div v-else class="btn-list">
				<vs-button gradient @click="openDialog('create')">
					<i class="el-icon-document-add" style="margin-right: 3px;" />
					新建模板
				</vs-button>
				<vs-button disabled gradient success>
					<i class="el-icon-upload" style="margin-right: 3px;" />
					导入模板
				</vs-button>
			</div>
		</div>
		<mould v-if="mouldStates" />
		<div v-else>当前暂无模板，请先进行新建模板</div>
		<vs-dialog v-model="active">
			<template #header>
				<h4>{{ title }}模板</h4>
			</template>
			<div class="flex">
				<vs-input class="margin" primary v-model="mould.name" type="text" label-placeholder="名称" />
				<vs-input class="margin" primary v-model="mould.offset" type="number" label-placeholder="偏移量" />
			</div>
			<div class="flex">
				<vs-input class="margin" primary v-model="mould.width" type="number" label-placeholder="宽度" />
				<vs-input class="margin" primary v-model="mould.height" type="number" label-placeholder="高度" />
			</div>
			<div class="flex">
				<vs-input class="margin" primary v-model="mould.TDPPI" type="number" label-placeholder="横向分辨率" />
				<vs-input class="margin" primary v-model="mould.MDPPT" type="number" label-placeholder="纵向分辨率" />
			</div>
			<template #footer>
				<div class="flex">
					<vs-button class="f1" @click="setMould">保存</vs-button>
					<vs-button class="f1 bggray" @click="active = false">取消</vs-button>
				</div>
			</template>
		</vs-dialog>
	</vs-col>
</template>

<script>
import json from '@/common/json.js';
import mould from './mould';
let df = {
	name: '',
	width: 800,
	height: 500,
	offset: 0,
	TDPPI: 200,
	MDPPT: 200
};
export default {
	name: 'centre',
	components: {
		mould
	},
	data() {
		return {
			mouldStates: this.$store.getters.mouldStates,
			logo: 'CPCLVIS',
			mould: df,
			title: '',
			active: false
		};
	},
	watch: {
		'$store.state.mouldStates'(e) {
			this.mouldStates = e;
		}
	},
	methods: {
		setMould() {
			this.active = false;
			this.$store.commit('createMould', this.mould);
			this.title = '';
			this.$message({
				offset: 100,
				message: '模板保存成功',
				type: 'success'
			});
		},
		deleteMould() {
			this.$confirm('此操作将删除该模板及模板上的所有组件数据, 是否继续?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$store.commit('deleteMould');
				this.$message({
					offset: 100,
					type: 'success',
					message: '模板已删除!'
				});
			});
		},
		openDialog(title) {
			this.active = true;
			this.mould = title == 'create' ? df : this.$store.state.mould;
			this.title = title == 'create' ? '新建' : '编辑';
		}
	}
};
</script>

<style>
.pages {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	background-color: #ebebeb;
	box-shadow: inset 0 0 10px #999;
}
.box-top {
	position: absolute;
	top: 0;
	background-color: rgb(36, 33, 69, 1);
	color: white;
	width: 98%;
	height: 70px;
	line-height: 70px;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	animation: tips 1s 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 10px 10px rgba(145, 145, 145, 0.3);
}
.btn-list {
	position: absolute;
	right: 20px;
	display: flex;
}
.bggray {
	background-color: #a8a8a8 !important;
}
.load {
	position: absolute;
	left: 30px;
	text-align: center;
	font-size: 30px;
	color: transparent;
	letter-spacing: 3px;
}
.load span {
	text-shadow: 0 0 2px rgba(204, 208, 212, 0.9), 0 15px 25px rgba(0, 0, 0, 0.3), 0 -2px 3px rgba(0, 0, 0, 0.1), 0 -5px 10px rgba(255, 255, 255, 0.5),
		0 5px 10px rgba(0, 0, 0, 0.3), 0 3px 4px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.45);

	animation: loading 1.2s ease-in-out infinite alternate;
}

.load span:nth-child(2) {
	animation-delay: 0.45s;
}
.load span:nth-child(3) {
	animation-delay: 0.6s;
}
.load span:nth-child(4) {
	animation-delay: 0.75s;
}
.load span:nth-child(5) {
	animation-delay: 0.9s;
}
.load span:nth-child(6) {
	animation-delay: 1.05s;
}
.load span:nth-child(7) {
	animation-delay: 1.2s;
}
</style>
